<script setup>
import { uploadService } from "@/api";
import { ref, toRef, onMounted, computed } from "vue";
import { Plus, Upload } from "@element-plus/icons-vue";

// 定义组件接收的props
const props = defineProps({
  imageUrl: {
    type: String,
  },
  width: {
    type: String,
    default: "width: 190px",
  },
});
// 通过props定义的imageUrl创建一个计算属性，以供模板使用
const emit = defineEmits(["update"]);
const imgUrl = computed(() => {
  return props.imageUrl;
});

// 用于表示上传加载状态的ref
let loading = ref(false);

/**
 * 处理文件上传事件，将文件转换为DataURL并更新imageUrl
 * @param {Object} raw 上传的文件对象
 * 包含文件的各种信息，如名称、最后修改时间、类型、大小等
 */
const onUploadFile = async ({ raw }) => {
  try {
    imgUrl.value = URL.createObjectURL(raw);
    loading.value = true;
    // 准备上传的文件数据
    let formData = new FormData();
    formData.append("file", raw);
    // 调用上传服务，更新imageUrl并关闭加载状态
    let { data } = await uploadService(formData);
    console.log({ data });
    emit("update", data);
  } catch (error) {
  } finally {
    loading.value = false;
  }
};

/**
 * 在上传头像前进行验证
 * @param {File} rawFile 用户选择的文件
 * @returns {Boolean} 如果验证通过返回true，否则返回false
 */
const beforeAvatarUpload = (rawFile) => {
  // 打印选中的文件信息，用于调试
  console.log(rawFile);
  // 用于存储选择的图片文件
  imgFile.value = rawFile;
  // 定义允许上传的文件类型
  const allowedTypes = ["image/jpeg", "image/jpg", "image/png", "image/gif"];
  // 检查文件类型是否被允许
  if (!allowedTypes.includes(rawFile.type)) {
    ElMessage.error("图片必须是JPG、JPEG、PNG或GIF格式");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    // 检查文件大小是否超过2MB
    ElMessage.error("图片大小不能超过2MB！");
    return false;
  }
  return true;
};
</script>
<template>
  <!-- 上传组件，配置各种上传相关选项和事件处理 -->
  <el-upload
    ref="uploadRef"
    class="avatar-uploader"
    :auto-upload="false"
    :show-file-list="false"
    :on-change="onUploadFile"
    :before-upload="beforeAvatarUpload"
    v-loading="loading"
  >
    <!-- 已上传图片展示 -->
    <img v-if="imgUrl" :src="imgUrl" class="avatar" />
    <!-- 未上传时的默认图标 -->
    <el-icon class="avatar-uploader-icon" v-else>
      <Upload />
    </el-icon>
  </el-upload>
</template>
<style lang="scss" scoped>
/* 上传框的样式定义 */
:deep() {
  .el-upload {
    border: 1px dashed var(--el-border-color);
    width: 200px;
    height: 200px;
    border-radius: 6px;
    cursor: pointer;
    overflow: hidden;
    padding: 0;
    background-color: #f5f7fa;
  }
  .avatar {
    width: 200px !important;
    height: 200px !important;
    object-fit: cover;
  }
  .el-upload:hover {
    border-color: var(--el-color-primary);
  }
  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 220px;
    height: 220px;
    text-align: center;
  }
}
</style>
